<template>
	<view class="createActor">
		<comHead :title="$t('gdjj.scjb')" :isLeft="true" :isRight="false"></comHead>
		
<!-- 		<swiper class="swiper" :indicator-dots="true" autoplay="true">
			<swiper-item v-for="item in imgs">
				<view class="swiper-item">
					<image :src="getImg(item)" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://siha.vxmeng.com/static/more/upload-bg.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper> -->
		<view class="uploadBox">
			<image @click="bindAvatarChange" :src="listData.images || 'https://siha.vxmeng.com/static/more/upload-bg.png'" mode="aspectFit"></image>
		</view>
		<view class="info">
			<view class="tit">{{$t('gdjj.jbxx')}}</view>
			<view class="row">
				<text>{{$t('gdjj.xm')}}</text>
				<input v-model="listData.name" type="text" :placeholder="$t('gdjj.txtjjbxm')"/>
			</view>
			<view class="row">
				<text>{{$t('gdjj.xb')}}</text>
				<view class="btns">
					<view @click="listData.gender = 1" class="btn" :class="listData.gender == 1?'on':''">
						<image src="https://siha.vxmeng.com/static/more/nan.png" mode="widthFix"></image>
						<text>{{$t('gdjj.nan')}}</text>
					</view>
					<view @click="listData.gender = 2" class="btn" :class="listData.gender == 2?'on':''">
						<image src="https://siha.vxmeng.com/static/more/nv.png" mode="widthFix"></image>
						<text>{{$t('gdjj.nv')}}</text>
					</view>
				</view>
			</view>
			<view class="row">
				<text>{{$t('gdjj.gs')}}</text>
				<input v-model="listData.company" type="text" :placeholder="$t('gdjj.txtjjbxm')"/>
			</view>
			<view class="row">
				<text>{{$t('gdjj.tjxy')}}</text>
				<textarea v-model="listData.remark" :placeholder="$t('gdjj.wntujian')"></textarea>
			</view>
			<view class="bot row">
				<text>{{$t('gdjj.hfsd')}}</text>
				<view class="r">
					<image src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
					<text>{{dou_num}}</text>
				</view>
			</view>
		</view>
		
		<view class="last">
			<view class="l" @click="draft">
				<image src="https://siha.vxmeng.com/static/more/cg.png" mode="widthFix"></image>
				<text>{{$t('gdjj.ccg')}}</text>
			</view> 	
			<view class="r" @click="uploadJb">{{$t('gdjj.sc')}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:{
					episode_script_id: '',
					name: '',
					gender: 1,
					images: '',
					company: '',
					remark: ''
				},
				dou_num:''
			}
		},
		onLoad(options) {
			this.listData.episode_script_id = options.episode_script_id
			this.dou_num = options.dou_num
			if(uni.getStorageSync('jb_'+this.listData.episode_script_id)){
				this.listData = uni.getStorageSync('jb_'+this.listData.episode_script_id)
			}
		},
		methods: {
			draft(){
				uni.setStorageSync('jb_'+this.listData.episode_script_id,this.listData)
				this.$tools.showTx(this.$t('gdjj.bccc'))
				setTimeout(()=>{
					this.$tools.toBack()
				}, 500)
			},
			async uploadJb(){
				console.log(this.listData)
				if(Object.values(this.listData).indexOf('')>-1){
					this.$tools.showTx(this.$t('gdjj.qwztx'))
					return
				}
				const res = await this.$myRequest({
					url: 'api/episode/doAddEpisodeGuest',
					data: this.listData
				})
				if (res.code == 1) {
					console.log(res)
					uni.setStorageSync('jb_'+this.listData.episode_script_id,'')
					this.$tools.showTx(res.msg)
					setTimeout(()=>{
						this.$tools.toBack()
					}, 500)
				}
			},
			bindAvatarChange() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed', 'original'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.uploadFile({
							url: 'https://siha.vxmeng.com/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								this.listData.images = JSON.parse(uploadFileRes.data).data.fullurl
							},
							fail: (uploadErr) => {
								console.error('上传失败', uploadErr);
							}
						});
					},
					fail: (err) => {
						console.error('选择图片失败', err);
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.createActor{
		height: 100vh;
		.swiper{
			padding: 0 32rpx;
			height: 500rpx;
			.swiper-item{
				height: 100%;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.uploadBox{
			width: 100%;
			height: 500rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.info{
			height: 660rpx;
			width: calc(100vw - 60rpx);
			margin: 30rpx auto 0;
			padding: 40rpx;
			border-radius: 20rpx;
			background-color: rgb(18,18,31);
			color: #fff;
			display: flex;
			flex-direction: column;
			position: relative;
			.tit{
				
			}
			.row{
				display: flex;
				min-height: 60rpx;
				font-size: 24rpx;
				margin-top: 24rpx;
				align-items: center;
				>text{
					width: 160rpx;
					font-size: 28rpx;
					padding-right: 10rpx;
					word-break: break-word;
					line-height: 40rpx;
					// line-height: 60rpx;
					// align-self: flex-start;
				}
				input{
					flex: 1;
					height: 56rpx;
					border-radius: 28rpx;
					text-align: center;
					background: linear-gradient(107deg, #2A2832 -3%, rgba(30, 36, 44, 0.65) 100%);
				}
				textarea{
					height: 144rpx;
					flex: 1;
					padding: 14rpx 34rpx;
					font-size: 24rpx;
					line-height: 36rpx;
					align-self: flex-start;
					background: linear-gradient(107deg, #2A2832 -3%, rgba(30, 36, 44, 0.65) 100%);
					border-radius: 20rpx;
				}
				.btns{
					flex: 1;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn{
						width: 220rpx;
						height: 56rpx;
						border-radius: 28rpx;
						line-height: 56rpx;
						background: linear-gradient(107deg, #2A2832 -3%, rgba(30, 36, 44, 0.65) 100%);
						&.on{
							background: linear-gradient(283deg, #62B6FC 0%, #5F58FD 77%, #5F58FD 99%);
						}
						image{
							width: 20rpx;
							vertical-align: middle;
							margin-right: 8rpx;
						}
					}
				}
				.se{
					background: linear-gradient(316deg, #62B6FC -6%, #5F58FD 72%, #5F58FD 92%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-fill-color: transparent;
				}
			}
			.bot{
				width: 610rpx;
				position: absolute;
				bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				.r{
					display: flex;
					align-items: center;
					font-size: 36rpx;
					image{
						width: 40rpx;
					}
				}
			}
		}
		.last{
			position: fixed;
			bottom: 40rpx;
			width: 100vw;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			height: 80rpx;
			margin-top: 20rpx;
			color: #fff;
			.l{
				// width: 80rpx;
				height: 100%;
				margin-right: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				image{
					width: 40rpx;
					margin-bottom: 10rpx;
				}
			}
			.r{
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background: linear-gradient(276deg, #62B6FC 0%, #5F58FD 78%, #5F58FD 99%);
			}
		}
	}
</style>

